<template>
<div class="MapBox">
    <div class="MapReturnIcon"></div>
    <div id="MapView"></div>
    <div class="Drawer" :class="{ open: isOpen }">
        <div class="DrawerInstructionsBox" @click="isOpen = !isOpen">
            <div class="DrawerInstructions"></div>
        </div>
        <div class="DrawerTop">
            <div class="DrawerTopName">终点：{{endName}}</div>
            <div class="DrawerTopBtn" @click="goBaiduMapApp">
                <i></i>
                <p>导航</p>
            </div>
        </div>
        <div class="DrawerChoice">
            <p>优选：</p>
            <div class="DrawerSelect" :class="{ active: isActive }" @click="isActive = !isActive">
                <div>最少时间</div>
                <div>最短距离</div>
            </div>
        </div>
        <div class="DrawerLine"></div>
        <div class="DrawerFoot">
            <div class="DrawerFootItem" :class="{ active: isFoot == 0 }" @click="travelModeChanger(0)">
                <span>{{transitData.time}}</span>
                <p>公交</p>
                <a>{{transitData.distance}}</a>
            </div>
            <div class="DrawerFootItem" :class="{ active: isFoot == 1 }" @click="travelModeChanger(1)">
                <span>{{ridingData.time}}</span>
                <p>骑行</p>
                <a>{{ridingData.distance}}</a>
            </div>
            <div class="DrawerFootItem" :class="{ active: isFoot == 2 }" @click="travelModeChanger(2)">
                <span>{{driveData.time}}</span>
                <p>驾车</p>
                <a>{{driveData.distance}}</a>
            </div>
            <div class="DrawerFootItem" :class="{ active: isFoot == 3 }" @click="travelModeChanger(3)">
                <span>{{walkData.time}}</span>
                <p>步行</p>
                <a>{{walkData.distance}}</a>
            </div>
        </div>
        <div class="DrawerLine"></div>
        <div class="DrawerList">
            <div class="DrawerListItem">
                <slot></slot>
            </div>
        </div>
    </div>
</div>
</template>

<script>
import loadBMap from '@/common/loadBMap.js' // ?异步加载百度地图报
import {
  getLocation,
  getLocationSync
} from '@/common/location.js'
import {
  drive,
  transit,
  walk,
  riding
} from '@/common/compute.js'
export default {
  name: 'Navigation',
  props: {
    mapAK: {
      type: String,
      required: true
    },
    name: {
      type: String
    },
    version: {
      type: String,
      default: '3.0'
    },
    positionNow: {
      type: Array,
      default: [116.403963, 39.915122] // 默认天安门
    }
  },
  data () {
    return {
      isActive: false,
      isOpen: false,
      isFoot: 0,
      startSpot: [],
      endSpot: this.positionNow,
      endName: this.name,
      driveData: {
        time: '?小时',
        distance: '?千米'
      },
      ridingData: {
        time: '?小时',
        distance: '?千米'
      },
      transitData: {
        time: '?小时',
        distance: '?千米'
      },
      walkData: {
        time: '?小时',
        distance: '?千米'
      },
      // 当前位置信息
      position: {
        province: '',
        city: '',
        lng: '',
        lat: ''
      }
    }
  },
  mounted () {
    if (!this.mapAK) {
      console.log('AK是必须的')
      return false
    }
    loadBMap(this.mapAK, this.version)
      .then(() => {
        // 百度地图API功能
        this.myMap = new BMap.Map('MapView', {
          minZoom: 5,
          maxZoom: 18
        }) // 创建Map实例并限制缩放大小
        // 获取当前定位
        // if (!getLocation(this) || this.position.lng == "") false;
        // console.log(this.position.lng)

        getLocationSync(this).then((e) => {
          // console.log('异步定位数据', e)
          var point = new BMap.Point(e.longitude, e.latitude)
          // 初始化地图,设置中心点坐标和地图级别
          this.myMap.centerAndZoom(point, 15)
          this.myMap.enableScrollWheelZoom() // 启用滚轮放大缩小，默认禁用
          // this.myMap.setMapStyleV2({
          //     styleId: "acebc75fdaa1c2267153971127748c74",
          // });
          // 这个才是V3版本虽然结尾有V2字样
          // this.myMap.setMapStyle({
          //     styleId: "acebc75fdaa1c2267153971127748c74",
          // });
          this.transitObj = transit(this.myMap, this, true)
          this.ridingObj = riding(this.myMap, this)
          this.driveObj = drive(this.myMap, this)
          this.walkObj = walk(this.myMap, this)
          if (!this.name) this.getName()
        })
      })
      .catch((err) => {
        console.log('百度地图加载失败:', err)
      })
  },
  methods: {
    travelModeChanger (num) {
      this.isFoot = num
      switch (num) {
        case 0:
          transit(this.myMap, this, true)
          break
        case 1:
          riding(this.myMap, this, true)
          break
        case 2:
          drive(this.myMap, this, true)
          break
        case 3:
          walk(this.myMap, this, true)
          break
      }
    },
    goBaiduMapApp () {
      var mode = ''
      switch (this.isFoot) {
        case 0:
          mode = 'transit'
          break
        case 1:
          mode = 'riding'
          break
        case 2:
          mode = 'driving'
          break
        case 3:
          mode = 'walking'
          break
      }
      window.location.href = `https://api.map.baidu.com/direction?origin=latlng:${this.position.lat},${this.position.lng}|name:当前位置&destination=latlng:${this.endSpot[1]},${this.endSpot[0]}|name:${this.endName}&mode=${mode}&region=${this.position.province}&output=html&src=webapp.baidu.openAPIdemo`
    },
    // 只能确定到某某路还无法确定到标志性建筑物等
    getName () {
      var _this = this
      var point = new BMap.Point(this.positionNow[0], this.positionNow[1])
      var gc = new BMap.Geocoder()
      gc.getLocation(point, function (rs) {
        var addComp = rs.addressComponents
        _this.endName = addComp.province + ', ' + addComp.city + ', ' + addComp.district + ', ' + addComp.street + ', ' + addComp.streetNumber
      })
    }
  },
  watch: {
    isFoot: function (val, old) {
      this.myMap.clearOverlays()
      // switch (old) {
      //     case 0:
      //         this.transitObj.clearResults();
      //         console.log('transitObj', this.transitObj)
      //         break;
      //     case 1:
      //         this.ridingObj.clearResults();
      //         console.log('ridingObj', this.ridingObj)
      //         break;
      //     case 2:
      //         this.driveObj.clearResults();
      //         console.log('driveObj', this.driveObj)
      //         break;
      //     case 3:
      //         this.walkObj.clearResults();
      //         console.log('walkObj', this.walkObj)
      //         break;
      // }
    }
  }
}
</script>

<style>
.anchorBL{
    display:none;
}

</style>

<style lang="less" scoped>
@transition-slide: cubic-bezier(0.87, 0.5, 0.43, 0.6);

.MapBox {
    position: relative;
    width: 100%;
    height: calc(100vh - 220px);
    background: #ddffd4;
}

.MapReturnIcon {
    position: fixed;
    top: 20px;
    left: 15px;
    width: 20px;
    height: 20px;
    background-image: url("../assets/icon/return.png");
    background-size: 100% 100%;
    z-index: 1;
}

#MapView {
    width: 100%;
    height: calc(100vh - 220px);
    overflow: hidden;
    margin: 0;
}

.Drawer {
    width: calc(100% - 38px);
    height: 220px;
    transition: height 0.2s;
    transition-timing-function: @transition-slide;
    position: fixed;
    bottom: 0;
    background: #fff;
    border-radius: 18px 18px 0 0;
    padding: 10px 18px 10px 20px;

    .DrawerInstructionsBox {
        width: 100%;
        height: 15px;
        display: flex;
        justify-content: center;

        .DrawerInstructions {
            width: 70px;
            height: 5px;
            border-radius: 2px;
            background: #f1f1f1;
        }
    }

    .DrawerTop {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .DrawerTopName {
            width: 72%;
            font-weight: 600;
            font-family: Arial Black, Gadget, sans-serif;
            color: #333;
            font-size: 18px;
            line-height: 24px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        .DrawerTopBtn {
            width: 19%;
            box-shadow: 0px 0px 2px 0px #dcdcdc;
            border-radius: 17px;
            height: 32px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            padding: 0 3%;

            i {
                width: 20px;
                height: 20px;
                background-image: url("../assets/icon/Navigation.png");
                background-size: 100% 100%;
            }

            p {
                font-size: 15px;
                margin: 0;
            }
        }
    }

    .DrawerChoice {
        @DrawerChoiceHeight: 25px;
        font-family: "Comic Sans MS", cursive, sans-serif;
        font-size: 18px;
        display: flex;
        align-items: center;
        margin-top: 10px;

        p {
            margin: 5px 0;
        }

        .DrawerSelect {
            transition: 0.5s all;
            display: flex;
            justify-content: space-between;
            width: 125px;
            height: @DrawerChoiceHeight;
            line-height: @DrawerChoiceHeight;
            border-radius: 15px;
            background: #f1f1f1;
            position: relative;
            padding: 3px 10px;
            font-size: 14px;
            color: #333;
            z-index: 0;
            transition: all 0.8s;
        }

        .DrawerSelect>div {
            z-index: 2;
        }

        .DrawerSelect:not(.active):after {
            transition: all 0.8s;
            text-align: center;
            content: "最少时间";
            z-index: 5;
            position: absolute;
            width: 44%;
            height: @DrawerChoiceHeight;
            line-height: @DrawerChoiceHeight;
            border-radius: 15px;
            background: #fff;
            padding: 0 3px;
            left: 3px;
        }

        .DrawerSelect.active:after {
            transition: all 0.8s;
            text-align: center;
            content: "最短距离";
            z-index: 5;
            position: absolute;
            width: 44%;
            height: @DrawerChoiceHeight;
            line-height: @DrawerChoiceHeight;
            border-radius: 15px;
            background: #fff;
            padding: 0 3px;
            right: 3px;
        }
    }

    .DrawerLine {
        width: 100%;
        height: 1px;
        background: #eaeaea;
        margin: 15px 0;
    }

    .DrawerFoot {
        display: flex;
        align-items: center;
        // height: 50px;
        width: 100%;
        // overflow-x: scroll;

        .DrawerFootItem {
            width: 25%;
            text-align: center;
            font-family: "Comic Sans MS", cursive, sans-serif;
            white-space: nowrap;
            span {
                font-size: 15px;
                margin: 5px 0;
            }

            p {
                text-align: center;
                margin: 4px 0;
            }

            a {
                font-size: 15px;
            }
        }

        .DrawerFootItem.active {
            color: #00907d;
        }
    }

    .DrawerList {
        width: 100%;
        height: 250px;
        overflow: scroll;

        .DrawerListItem {
            width: 100%;
            height: 50px;
        }
    }
}

.Drawer.open {
    height: 500px;
    transition: height 0.2s;
    transition-timing-function: @transition-slide;
}

iframe {
    display: none;
}
</style>
